<template>
  <div>
    <!-- 头部搜索区域 -->
    <van-row class="topRow">
      <van-col span="2" @click="hanldeHome">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="21">
        <van-search v-model="searchValue" shape="round" background="#fff" placeholder="请输入搜索关键词" />
      </van-col>
    </van-row>

    <!-- 一级分类 -->
    <van-dropdown-menu active-color="#ee0a24">
      <van-dropdown-item v-model="value0" :options="option0" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option1" />
      <van-dropdown-item title="筛选" ref="item">
        <van-switch-cell v-model="switch1" title="包邮" />
        <van-switch-cell v-model="switch2" title="团购" />
        <van-button block type="info">确认</van-button>
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 滑动单元格 -->
    <van-tabs line-width="120px" :ellipsis="false" @click="handleTabs">
      <van-tab title="分类">
        <template #title>
          分类
          <van-icon v-if="tabIcon==true" name="arrow-down" />
          <van-icon v-else-if="tabIcon==false" name="arrow-up" />
        </template>
        1
      </van-tab>
      <van-tab title="拍拍二手">
        <template #title>
          拍拍二手
          <van-icon v-if="tabIcon==true" name="arrow-down" />
          <van-icon v-else-if="tabIcon==false" name="arrow-up" />
        </template>
        3
      </van-tab>
      <van-tab title="上市时间">
        <template #title>
          上市时间
          <van-icon v-if="tabIcon==true" name="arrow-down" />
          <van-icon v-else-if="tabIcon==false" name="arrow-up" />
        </template>
        2
      </van-tab>
      <van-tab title="价格">
        <template #title>
          价格
          <van-icon v-if="tabIcon==true" name="arrow-down" />
          <van-icon v-else-if="tabIcon==false" name="arrow-up" />
        </template>
      </van-tab>
      <van-tab title="新品">
        <template #title>
          新品
          <van-icon name="arrow-down" />
        </template>
      </van-tab>
      <van-tab title="打折">
        <template #title>
          打折
          <van-icon name="arrow-down" />
        </template>
      </van-tab>
    </van-tabs>
    <!-- 商品展示列表 -->
    <div>
      <van-card
        price="88.00"
        desc="日本深受欢迎的人际沟通课程，世界知名企业员工指定培训教材！7个突破口+8个技巧，措辞小改变，人生大转变！用《蔡康永的说话之道》领悟说话魅力，用这本书实践说话之道"
        title="所谓情商高，就是会说话"
        thumb="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <van-card
        price="88.00"
        desc="日本深受欢迎的人际沟通课程，世界知名企业员工指定培训教材！7个突破口+8个技巧，措辞小改变，人生大转变！用《蔡康永的说话之道》领悟说话魅力，用这本书实践说话之道"
        title="所谓情商高，就是会说话"
        thumb="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <van-card
        price="88.00"
        desc="日本深受欢迎的人际沟通课程，世界知名企业员工指定培训教材！7个突破口+8个技巧，措辞小改变，人生大转变！用《蔡康永的说话之道》领悟说话魅力，用这本书实践说话之道"
        title="所谓情商高，就是会说话"
        thumb="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <van-card
        price="88.00"
        desc="日本深受欢迎的人际沟通课程，世界知名企业员工指定培训教材！7个突破口+8个技巧，措辞小改变，人生大转变！用《蔡康永的说话之道》领悟说话魅力，用这本书实践说话之道"
        title="所谓情商高，就是会说话"
        thumb="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <van-card
        price="88.00"
        desc="日本深受欢迎的人际沟通课程，世界知名企业员工指定培训教材！7个突破口+8个技巧，措辞小改变，人生大转变！用《蔡康永的说话之道》领悟说话魅力，用这本书实践说话之道"
        title="所谓情商高，就是会说话"
        thumb="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <van-card
        price="88.00"
        desc="日本深受欢迎的人际沟通课程，世界知名企业员工指定培训教材！7个突破口+8个技巧，措辞小改变，人生大转变！用《蔡康永的说话之道》领悟说话魅力，用这本书实践说话之道"
        title="所谓情商高，就是会说话"
        thumb="https://img.yzcdn.cn/vant/cat.jpeg"
      />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchValue: '',
      //   一级分类数据
      value0: 0,
      value2: 'a',
      value3: 0,
      tabIcon: true,
      switch1: false,
      switch2: false,
      option0: [
        { text: '综合', value: 0 },
        { text: '最新上架', value: 1 },
        { text: '价格最低', value: 2 },
        { text: '价格最高', value: 3 },
        { text: '评价最多', value: 4 }
      ],
      option1: [
        { text: '有货优先', value: 0 },
        { text: '货到付款', value: 1 },
        { text: '京东国际', value: 2 },
        { text: 'PULS专享', value: 3 },
        { text: '促销商品', value: 4 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ],
      option4: [
        { text: '有货优先', value: 0 },
        { text: '货到付款', value: 1 },
        { text: '京东国际', value: 2 },
        { text: 'PULS专享', value: 3 },
        { text: '促销商品', value: 4 }
      ]
    }
  },
  mounted () {},
  methods: {
    hanldeHome () {
      this.$router.push('/classify')
    },
    handleTabs (name, title) {
      console.log(name + title)
    }
  }
}
</script>

<style lang="less" scoped>
.topRow {
  border-bottom: 1px solid #ccc;
  .van-icon {
    margin-top: 15px;
    margin-left: 10px;
  }
}
</style>
